
<template>
<!-- 美团对账正常单    美团对账异常单 -->
    <div class="storeInfo">
        <div class="head">
            
            <el-form class="headForm" style="width:100%">
                <el-form-item label="" style="width:70%;margin:0 auto">
                    <el-input v-model="form.order_id"></el-input>                   
                </el-form-item>
                <el-button type="danger" @click="search" >查询</el-button> 
                <!-- <el-button class="btnTxt">结算金额合计:121231545元</el-button>  -->
                
            </el-form>
            
        </div> 
        <p style="line-height:30px;padding-left:20px;margin-top:8px;color:#333" v-if="form.order_id == ''">最近{{total}}笔人工退款订单记录</p>
        <!-- table -->
        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center">
                <!-- 订单号	门店	支付时间	房间号	实付	支付方式	订单状态	退款提交时间	操作				 -->
                <el-table-column prop="order_id" label="订单号" fixed width="200">
                    <template slot-scope="scope">
                        <p :class="scope.row.is_refund == 1?'red':''">{{scope.row.order_id}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="store_name" label="门店" width="200"> </el-table-column>
                <el-table-column prop="pay_time" label="支付时间"  width="200"></el-table-column>
                <el-table-column prop="room_name" label="房间号"></el-table-column>

                <el-table-column prop="total_price" label="实付"></el-table-column>               
                <el-table-column prop="pay_from_cn" label="支付方式"></el-table-column>
                <el-table-column prop="order_status_cn" label="订单状态" ></el-table-column>
                <el-table-column prop="refund_time" label="退款提交时间" width="200"></el-table-column>


                <el-table-column label="操作" prop="price_id" v-if="limitList.length>0">
                    <template  slot-scope="scope">            
                        <span v-for="(item,indexLimit) in limitList" :key="indexLimit" class="lightFont" @click="theClick(item.url,scope.row)">
                            <i :class="(item.url == 'refund'&&scope.row.is_refund != 1)?'gray':''">{{item.name}}</i>
                            <!-- <i v-if="item.url == 'detail'">{{item.name}}</i> -->
                            <i v-if="indexLimit != limitList.length-1">&nbsp;|&nbsp;</i>
                        </span>
                    </template>
                </el-table-column>

            </el-table>                       
        </div>
        <!-- 分页部分 -->
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>
        

        <el-dialog title="退款确认" :visible.sync="refundShow" class="business">
            <div class="refundHeadBox">
                <p>订单号：{{refundTK.order_id}}</p>
                <p>退款金额：{{refundTK.total_price}}</p>
            </div>
            <el-form :model="editForm">
                <el-form-item label="退款原因" label-width="100px">
                    <el-input type="textarea" v-model="editForm.reason"></el-input>
                </el-form-item>
                <div class="getyzmtxtbox">
                    <p>退款验证码:</p>
                    <p class="theMid">江雪峰 | 137****8861</p>                       
                    <p v-if="getCaptcha" class="oprateBtn" @click="getCaptchaFn">发送验证码</p>
                    <p v-if="!getCaptcha" style="margin-left:30px">{{num}}s后重新发送</p>
                </div>
                <el-form-item label="" label-width="100px">
                    <el-input type="text" v-model="editForm.captcha"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="refundShow = false">取 消</el-button>
                <el-button type="primary" @click="comfirm">确 定</el-button>
            </div>
        </el-dialog>


    </div>
  
</template>
<style lang="scss" scoped>
.gray{color:#ccc}
.red{color:red}
.refundHeadBox{
    width:90%;
    margin:8px 0;
    line-height:24px;
    font-size:14px;
    background:#F4F4F4;
    border-radius: 5px;
    padding:10px;

}
.getyzmtxtbox{
    display: flex;
    flex-direction:row;
    margin-bottom:10px;
    .oprateBtn{
        color:red;
        margin-left:30px;
    }
    .theMid{
        color:#ccc;
        margin-left:20px;
    }
}

</style>
<script>
import Vue from 'vue';
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js'; 
import upload from '../../pop/upload.vue';
let a = null;
export default {
   components:{
       upload,
   },
    data () {
    return {
        form:{
            order_id:""
        },
        limitList:[
            {url:'detail',name:"详情"},
            {url:'refund',name:"退款"},
        ],
        tableData:[],
        total:50,
        size:20,
        pageNum:1,
        num:60,
        getCaptcha:true,
        refundShow:false,
        refundTK:{
            order_id:"",
            total_price:""
        },
        editForm:{

        },  
        id:'', 
        editW:"150px",
        lable1txt:'', 
    }
  }, 
   mounted(){
      let that = this;
      that.getList()
  },
  watch:{
      refundShow(n,o){
          let that = this;
          if(n == false){
              that.num = 60;
              that.getCaptcha = true;
              clearInterval(a)
          }
      }    
  },
  methods:{
    search(){
        let that = this;
        //搜索有问题，搜索2019-03数据和2019-04数据是一样的；-error
        abc.get(that,potUrl.refundsearch,that.form,(data)=>{
            that.tableData = data.data
        })
    },
    changePage(val){
        var that = this;
        that.pageNum = val;
        that.form.page = val;
        that.getList()
    },

    theClick(url,a){
        let that = this;
        
        if(url == 'detail'){
            that.dispostShow = true;
            that.editForm.settle_id = a.settle_id
        }else{
            that.refundShow = true;
            that.refundTK.order_id = a.order_id;
            that.refundTK.total_price = a.total_price;
            console.log(that.editForm)
            if(a.is_refund == 1){
                that.editForm.order_id = a.order_id;
            }
        }
    },
    getCaptchaFn(){
        let that = this;
        if(that.getCaptcha){
            abc.post(that,potUrl.captchamobilev2,{type: 'store_op_refund',order_id:that.editForm.order_id},(res)=>{

            })
            that.getCaptcha = false;        
            a = setInterval(() => {            
                if(that.num <= 0){
                    that.num = 60;
                    clearInterval(a);
                    that.getCaptcha = true;
                    return
                }
                that.num--;
            }, 1000);
        }
    },
    comfirm(){
        //（魅平台券码不正确）处理的接口总是修改失败；-error
        let that = this;
        let params = that.editForm;
        abc.post(that,potUrl.refundrun,params,(res)=>{
            params = null;
            that.refundShow = false;
            that.getList()
        })

    },
    getList(){
        let that = this;
        abc.get(that,potUrl.refundtoplist,{},(res)=>{
            that.tableData=res.data;
            that.total = res.data.length;
        })//列表
    },
    getImg(data){
        let that = this;
        that.editForm.settle_image = data
        console.log(data)
    },
  }
}
</script>
